<template>
  <div class="c-h">
    <cj-popup v-model="showPresent" round position="bottom" :closeable="true" title="赠送详情" @close="closePresent()">
      <div class="c-ph24 c-pb20">
        <div class="c-bg-xmlred-10 c-br20 c-mt20 c-ph24 c-pv20">
          <div class="c-fc-xmlred c-fs22 c-lh36"><span class="c-fs24 iconfont c-mr8 c-vcAlign-middle">&#xe963;</span>重要提醒</div>
          <div class="c-fc-xmlred c-fs22 c-lh36">1、用户领取成功后才扣名额，分享出去不会马上扣名额，24小时内可领取。</div>
          <div class="c-fc-xmlred c-fs22 c-lh36">2、没有推荐人，或者推荐人是您，且满足上面可领条件的用户，才可以领取。</div>
        </div>
        <div class="c-mt30 c-flex-row">
          <div class="c-fs24 c-fc-sblack c-ws-n">赠送类型：</div>
          <div class="c-ml24 c-w100">
            <div v-if="(giveType==0 && isVipEnable==false) || (giveType==1 && isSvipEnable==false)">
              <div class="c-flex-row c-aligni-center c-w100">
                <div class="c-flex-row c-aligni-center c-w100 c-pb20">
                  <div>商家没有开通赠送权限</div>
                </div>
              </div>
            </div>
            <div v-else>
              <!-- VIP -->
              <div class="c-flex-row c-aligni-center c-flexw-wrap" v-if="giveType==0">
                <div class="c-flex-row c-aligni-center" :class="item.enable == 1 ? 'c-w50' : ''" v-for="(item,index) in supportType.vip" :key="index">
                  <div v-if="item.enable == 1" class="c-flex-row c-aligni-center c-pb20" @click="changeVipType(index, item.presentType)">
                    <div class="icon-radio">
                      <div class="icon-radio-checked" :class="vipNum<=0 ? 'vip-type-disable' : 'theme-bg'" v-show="vipType==index"></div>
                    </div>
                    <div class="c-fs24 c-ml10" :class="vipNum<=0 ? 'c-fc-sgray' : 'c-fc-xblack'">vip{{item.name}}</div>
                  </div>
                </div>
              </div>
              <!-- SVIP -->
              <div class="c-flex-row c-aligni-center c-flexw-wrap" v-if="giveType==1">
                <div class="c-flex-row c-aligni-center" :class="item.enable == 1 ? 'c-w50' : ''" v-for="(item,index) in supportType.svip" :key="index">
                  <div v-if="item.enable == 1" class="c-flex-row c-aligni-center c-pb20" @click="changeVipType(index, item.presentType)">
                    <div class="icon-radio">
                      <div class="icon-radio-checked" :class="svipNum<=0 ? 'vip-type-disable' : 'theme-bg'" v-show="vipType==index"></div>
                    </div>
                    <div class="c-fs24 c-ml10" :class="svipNum<=0 ? 'c-fc-sgray' : 'c-fc-xblack'">svip{{item.name}}</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="c-mt12 c-flex-row c-aligni-center">
          <div class="c-fs24 c-fc-sblack">可领用户：</div>
          <div class="c-flex-row c-aligni-center c-ml24" @click="changeRecieverType('normal')">
            <div class="icon-checkbox" :class="receiver.indexOf('normal')!=-1 ? '' : 'c-bd1-mgray'">
              <div v-show="receiver.indexOf('normal')!=-1" class="c-w100 c-h theme-bg c-flex-row c-flex-center">
                <div class="iconfont c-fc-white c-fs18">&#xe82c;</div>
              </div>
            </div>
            <div class="c-fs24 c-fc-xblack c-ml10">普通用户</div>
          </div>
          <div class="c-flex-row c-aligni-center c-ml24" @click="changeRecieverType('VIP')">
            <div class="icon-checkbox" :class="receiver.indexOf('VIP')!=-1 ? '' : 'c-bd1-mgray'">
              <div v-show="receiver.indexOf('VIP')!=-1" class="c-w100 c-h theme-bg c-flex-row c-flex-center">
                <div class="iconfont c-fc-white c-fs18">&#xe82c;</div>
              </div>
            </div>
            <div class="c-fs24 c-fc-xblack c-ml10">VIP会员</div>
          </div>
          <div class="c-flex-row c-aligni-center c-ml24" @click="changeRecieverType('SVIP')">
            <div class="icon-checkbox" :class="receiver.indexOf('SVIP')!=-1 ? '' : 'c-bd1-mgray'">
              <div v-show="receiver.indexOf('SVIP')!=-1" class="c-w100 c-h theme-bg c-flex-row c-flex-center">
                <div class="iconfont c-fc-white c-fs18">&#xe82c;</div>
              </div>
            </div>
            <div class="c-fs24 c-fc-xblack c-ml10">SVIP会员</div>
          </div>
        </div>
        <div class="c-mt28 c-flex-row c-aligni-center">
          <div class="c-fs24 c-fc-sblack">领取要求：</div>
          <div class="c-flex-row c-aligni-center c-ml24" @click="clickBindTel">
            <!-- <div class="icon-radio">
              <div class="icon-radio-checked theme-bg" v-show="needBind==true"></div>
            </div> -->
            <div class="icon-checkbox" :class="needBind==true ? '' : 'c-bd1-mgray'">
              <div v-show="needBind==true" class="c-w100 c-h theme-bg c-flex-row c-flex-center">
                <div class="iconfont c-fc-white c-fs18">&#xe82c;</div>
              </div>
            </div>
            <div class="c-fs24 c-fc-xblack c-ml10">领取之前绑定手机号</div>
          </div>
        </div>
        <div class="c-mt28 c-flex-row c-aligni-center">
          <div class="c-fs24 c-fc-sblack">赠送数量：</div>
          <shop-number :max='maxNum' class="c-ml24" :inputNum='presentCount' @subNum='subNum' @addNum='addNum' @inputChange='inputChange' @finishInput='finishInput'></shop-number>
        </div>
        <div class="c-mt28 c-flex-row c-aligni-center">
          <div class="c-fs24 c-fc-sblack">消耗名额：</div>
          <div class="c-fs24 c-fc-xblack c-ml24">{{giveType == 0 ? supportType.vip[vipType].quota : supportType.svip[vipType].quota}}个</div>
        </div>
        <div class="c-mt28 c-flex-row c-aligni-start">
          <div class="c-fs24 c-fc-sblack c-mt10">赠送描述：</div>
          <div class="c-flex-grow1 c-ml24 c-br6 c-ph20 c-pt16 c-pb12 c-bd1-mgray">
            <textarea maxlength="100" v-model="description" name="" rows="3" :placeholder="defaultPlaceholder ? defaultPlaceholder : this.giveType==0 ? '领取后，可免费享受VIP权益！快来领取吧！' : '领取后，可免费享受SVIP权益！快来领取吧！'" class="c-w100 c-bd0 c-fs22 c-lh32 needsclick"></textarea>
          </div>
        </div>
        <div class="c-flex-row c-flex-center c-w100 c-hh64 c-fc-white c-fs28 c-mt40 c-br32" @click="goPresent" :class="(maxNum<=0 || hasYearVip==false) ? 'c-bg-d7' : 'theme-bg'">确定</div>
        <div v-if="hasYearVip==false" class="c-fs20 c-fc-mred c-textAlign-c c-mt10">
          商家没有开通会员{{this.typeTem==15 || this.typeTem==16 ? "包月" : this.typeTem==17 || this.typeTem==18 ? "包季度" :  this.typeTem==19 || this.typeTem==20 ? "包半年" : this.typeTem==6 || this.typeTem==8 ? '包年' : this.typeTem==21 || this.typeTem==22 ? '包两年' : this.typeTem==7 || this.typeTem==9 ? '包三年' : '长期有效'}}权限,暂不能赠送！
        </div>
      </div>
    </cj-popup>
  </div>
</template>

<script>
import ShopNumber from "@/components/templates/shopNumber.vue";
export default {
  name: 'shareMember',
  components: {
    ShopNumber
  },
  props: {
    isShowPresent: {
      type: Boolean,
      default: false
    },
    vipNum: {
      //剩余可以赠送的VIP数量
      type: Number,
      default: 0
    },
    svipNum: {
      //剩余可以赠送的SVIP数量
      type: Number,
      default: 0
    },
    giveType: {
      //赠送的类型 vip 0 svip 1
      type: Number,
      default: 0
    },
    hasYearVip: {
      //服务商是否设置了包年服务
      type: Boolean,
      default: true
    },
    supportType: {
      //后台自定义会员类型
      type: Array,
      default: () => []
    },
    vipType: {
      type: Number,
      default: 0
    },
    isVipEnable: {
      ///后台是否开启服务商赠送vip名额
      type: Boolean,
      default: true
    },
    isSvipEnable: {
      ///后台是否开启服务商赠送svip名额
      type: Boolean,
      default: true
    },
    typeTem: {
      // 不用会员类型 创不同参数
      type: Number,
      default: 0
    },
    defaultPlaceholder: {
      type: String,
      default: '',
    }
  },
  beforeCreate() {

  },
  data() {
    return {
      showPresent: false,
      presentCount: 1,
      receiver: ['normal'],
      needBind: false,
      description: "",
    }
  },
  created() {
    this.showPresent = this.isShowPresent;
  },
  mounted() {

  },
  computed: {
    maxNum: function () {
      return this.giveType == 0 ? Math.floor(this.vipNum / this.supportType.vip[this.vipType].quota) : Math.floor(this.svipNum / this.supportType.svip[this.vipType].quota);
    }
  },
  watch: {

  },
  methods: {
    closePresent: function () {
      this.$emit('closePresent');
    },
    goPresent: function () {
      if (this.maxNum <= 0 || this.hasYearVip == false) {
        return false;
      }

      let receiverTem = -1;
      if (this.receiver.indexOf("normal") != -1 && this.receiver.indexOf("VIP") != -1 && this.receiver.indexOf("SVIP") != -1) {
        receiverTem = -1;
      } else if (this.receiver.indexOf("normal") != -1 && this.receiver.indexOf("VIP") != -1) {
        receiverTem = 3;
      } else if (this.receiver.indexOf("normal") != -1 && this.receiver.indexOf("SVIP") != -1) {
        receiverTem = 5;
      } else if (this.receiver.indexOf("VIP") != -1 && this.receiver.indexOf("SVIP") != -1) {
        receiverTem = 6;
      } else if (this.receiver.indexOf("normal") != -1) {
        receiverTem = 1;
      } else if (this.receiver.indexOf("VIP") != -1) {
        receiverTem = 2;
      } else if (this.receiver.indexOf("SVIP") != -1) {
        receiverTem = 4;
      }

      let descTem = '';
      if (this.description != '') {
        descTem = this.description;
      } else if (this.defaultPlaceholder) {
        descTem = this.defaultPlaceholder;
      } else if (this.giveType == 0) {
        descTem = '领取后，可免费享受VIP权益！快来领取吧！';
      } else {
        descTem = '领取后，可免费享受SVIP权益！快来领取吧！';
      }

      // let typeTem = 0;
      // if (this.giveType == 0) {
      //   //vip赠送类型 15:包月, 17:包季度, 19:包半年, 6:包年, 21:包两年, 7:包三年, 31:长期有效
      //   typeTem = this.vipType == 0 ? 15 : this.vipType == 1 ? 17 : this.vipType == 2 ? 19 : this.vipType == 3 ? 6 : this.vipType == 4 ? 21 : this.vipType == 5 ? 7 : 31;
      // } else if (this.giveType == 1) {
      //   //svip赠送类型 16:包月, 18:包季度, 20:包半年, 8:包年, 22:包两年, 9:包三年, 32:长期有效
      //   typeTem = this.vipType == 0 ? 16 : this.vipType == 1 ? 18 : this.vipType == 2 ? 20 : this.vipType == 3 ? 8 : this.vipType == 4 ? 22 : this.vipType == 5 ? 9 : 32;
      // }

      let needMobileTem = this.needBind == true ? 1 : -1;
      this.$emit('goPresent', {
        num: this.presentCount,
        require: receiverTem,
        desc: descTem,
        type: this.typeTem,
        needMobile: needMobileTem
      });
    },
    //数量增加
    addNum(item) {
      this.presentCount = item.inputNumber;
    },
    //数量减少
    subNum(item) {
      this.presentCount = item.inputNumber;
    },
    //输入数量
    inputChange(item) {
      this.presentCount = item.inputNumber;
    },
    finishInput(item) {
      this.presentCount = item.inputNumber;
    },
    changeVipType(type, presentType) {
      if (this.giveType == 0) {
        if (this.vipNum <= 0) {
          return false;
        }
      } else if (this.giveType == 1) {
        if (this.svipNum <= 0) {
          return false;
        }
      }
      if (type == 0 && this.vipType != 0) {
        this.vipType = 0;
      } else if (type == 1 && this.vipType != 1) {
        this.vipType = 1;
      } else if (type == 2 && this.vipType != 2) {
        this.vipType = 2;
      } else if (type == 3 && this.vipType != 3) {
        this.vipType = 3;
      } else if (type == 4 && this.vipType != 4) {
        this.vipType = 4;
      } else if (type == 5 && this.vipType != 5) {
        this.vipType = 5;
      } else if (type == 6 && this.vipType != 6) {
        this.vipType = 6;
      }
      this.typeTem = presentType;
      this.presentCount = 1;
      this.receiver = ['normal'];
      this.needBind = false;
      this.description = "";
      this.$emit('changeYearsType');
    },
    changeRecieverType(RecieverType) {
      if (RecieverType == 'normal') {
        return;
      }
      if (this.receiver.indexOf(RecieverType) != -1) {
        this.receiver.splice(this.receiver.indexOf(RecieverType), 1);
      } else {
        this.receiver.push(RecieverType);
      }
    },
    clickBindTel() {
      this.needBind = !this.needBind;
    }
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.content {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1003;
  background-color: #fff;
}
.content > div > img {
  width: 1.2rem;
  height: 2.2rem;
  position: absolute;
  top: 0.4rem;
  right: 0.3rem;
  z-index: 1004;
}
.masker {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1002;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
}
.close {
  position: absolute;
  right: 0.6rem;
  top: 0.4rem;
}
.icon-radio {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid #ccc;
  border-radius: 50%;
  padding: 0.12rem;
  font-size: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.icon-radio-checked {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  font-size: 0;
}
.vip-type-bg {
  background-color: #2fa1ff;
}
.vip-type-disable {
  background-color: #ccc;
}
.icon-checkbox {
  width: 0.5rem;
  height: 0.5rem;
  overflow: hidden;
  border-radius: 0.1rem;
}
</style>
